<!--
 * @file 添加、编辑表单
 * @author its-wild(https://gitee.com/its-wild)
 * @date 2021/12/03
-->
<template>
  <a-modal
    v-bind="$attrs"
    :title="editType === 1 ? '添加' : '编辑'"
    :ok-button-props="{ loading: loading }"
    @ok="onSubmit"
  >
    <a-form
      ref="formRef"
      :model="formState"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-item label="姓名" name="realName">
        <a-input v-model:value="formState.realName" placeholder="请输入名字" autocomplete="off" />
      </a-form-item>
      <a-form-item label="电话" name="mobile">
        <a-input v-model:value="formState.mobile" placeholder="请输入电话" autocomplete="off" />
      </a-form-item>
      <a-form-item label="类型" name="userType">
        <a-select v-model:value="formState.userType" placeholder="请选择类型">
          <a-select-option
            v-for="item in teacherTypes"
            :key="item.value"
            :value="item.value"
          >
            {{ item.title }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, UnwrapRef, toRaw } from 'vue'
import { TEdit } from '@/common/searchTable/index'
import { IMdl, update, addTo } from '@/apis/example'

interface IFormState {
  realName?: string
  mobile?: string
  userType?: string
}

export default defineComponent({
  name: 'EditForm',
  setup(props, { emit }) {
    const editType = ref<TEdit>(1)
    let model: IMdl
    const loading = ref(false)
    const setLoading = (val: boolean) => {
      loading.value = val
    }
    const teacherTypes = [
      {
        value: 'TEACHER',
        title: '普通教师'
      },
      {
        value: 'HEADMASTER',
        title: '班主任'
      },
      {
        value: 'SCHOOL_MASTER',
        title: '校长'
      }
    ]

    // 表单
    const formRef = ref()
    const formState: UnwrapRef<IFormState> = reactive({})
    const rules = {
      realName: [
        { required: true, message: '请输入名字', trigger: 'blur' },
        { min: 2, max: 10, message: '长度2到10', trigger: 'blur' }
      ],
      mobile: [{ required: true, message: '请输入电话', trigger: 'blur' }],
      userType: [{ required: true, message: '请选择类型', trigger: 'change' }]
    }
    const resetForm = () => {
      formRef.value && formRef.value.resetFields()
    }

    // 添加
    const add = (mdl: any) => {
      editType.value = 1
      model = mdl
      resetForm()
    }
    // 编辑
    const edit = (mdl: any) => {
      editType.value = 2
      model = mdl
      const { teacherName, mobile, schoolUserType } = mdl
      formState.realName = teacherName
      formState.mobile = mobile
      formState.userType = schoolUserType
    }

    const onSubmit = () => {
      formRef.value
        .validate()
        .then(async () => {
          let params
          let submit
          // 校验通过，请求后台接口
          if (editType.value === 2) {
            params = {
              gender: 'NONE',
              schoolUserId: model.schoolUserId,
              schoolId: model.schoolId,
              ...toRaw(formState)
            }
            submit = update
          } else {
            params = {
              gender: 'NONE',
              schoolId: model.schoolId,
              ...toRaw(formState)
            }
            submit = addTo
          }
          setLoading(true)
          await submit(params)
          resetForm()
          setLoading(false)
          emit('sure')
        })
        .catch((error: any) => {
          console.log('error', error)
        })
    }

    return {
      editType,
      loading,
      setLoading,
      formRef,
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      formState,
      rules,
      onSubmit,
      teacherTypes,
      add,
      edit
    }
  }
})
</script>

<style scoped lang="less"></style>
